<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<title>地图显示</title>
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<!-- 加载地图JSAPI脚本 -->
		<script src="https://webapi.amap.com/maps?v=2.0&key=f4b1de31f2285957a4f4b8e79984715d"></script>
		<script src="videoPoints.js"></script>
		<script>
			var map = new AMap.Map('container', {
				viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
				zoom: 16, // 初始化地图层级
				center: [120.23972350661, 31.52510537604] // 初始化地图中心点
			});
			var position = new AMap.LngLat(120.23972350661, 31.52510537604);
			// 点标记显示内容，HTML要素字符串

			function showData(id) {
				//.getAttribute("data")
				console.log(id)
				for (var i = 0; i < points.length; i++) {
					let p = points[i];
					if(p.id == id){
						console.log(JSON.stringify(p))
					}
				}
			}

			function addPoint(lon, lat, name, id) {
				
				let markerContent = '' +
					'<div class="custom-content-marker">' +
					'   <img onclick="showData(\''+id+'\')" data="'+id+'" width="20px" height="20px" src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png">' +
					'   <div class="close-btn" style="width:200px;color:red;" onclick="clearMarker()">' + name + '</div>' +
					'</div>';

				let marker = new AMap.Marker({
					position: [lon, lat],
					// 将 html 传给 content
					content: markerContent,
					// 以 icon 的 [center bottom] 为原点
					offset: new AMap.Pixel(-13, -30)
				});
				map.add(marker);
			}


			function clearMarker() {
				map.remove(marker);
			}

			for (var i = 0; i < points.length; i++) {
				let point = points[i]
				
				addPoint(point.lon, point.lat, point.name, point.id)
			}
		</script>

	</body>
</html>